<template>
  <div class="container">
    <el-card class="question-new-card">
      <span slot="header">试题录入</span>
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="学科：" prop="subjectID">
          <el-select v-model="formData.subjectID" style="width: 400px">
            <el-option
              v-for="(item, index) in subjects"
              :key="index"
              :value="item.id"
              :label="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogID">
          <el-select v-model="formData.catalogID" style="width: 400px">
            <el-option
              v-for="(item, index) in directorys"
              :key="index"
              :value="item.id"
              :label="item.directoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select v-model="formData.enterpriseID" style="width: 400px">
            <el-option
              v-for="(item, index) in companys"
              :key="index"
              :value="item.id"
              :label="item.shortName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="city">
          <el-select
            v-model="formData.province"
            style="width: 198px"
            @change="provinceChange"
          >
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="formData.city"
            style="width: 198px; margin-left: 4px"
          >
            <el-option
              v-for="(item, index) in citys"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向：" prop="direction">
          <el-select v-model="formData.direction" style="width: 400px">
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-radio v-model="formData.questionType" label="单选">单选</el-radio>
          <el-radio v-model="formData.questionType" label="多选">多选</el-radio>
          <el-radio v-model="formData.questionType" label="简答">简答</el-radio>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-radio v-model="formData.difficulty" label="简单">简单</el-radio>
          <el-radio v-model="formData.difficulty" label="一般">一般</el-radio>
          <el-radio v-model="formData.difficulty" label="困难">困难</el-radio>
        </el-form-item>
        <el-form-item label="题干：" prop="question">
          <quill-editor v-model="formData.question"> </quill-editor>
        </el-form-item>
        <el-form-item label="选项：" v-if="formData.questionType === '单选'">
          <el-row style="padding-bottom: 20px">
            <el-radio v-model="radio" label="A" style="margin-right: 0px"
              >A：</el-radio
            >
            <el-input style="width: 240px"></el-input>
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <span>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </el-row>
          <el-row style="padding-bottom: 20px">
            <el-radio v-model="radio" label="B" style="margin-right: 0px"
              >B：</el-radio
            >
            <el-input style="width: 240px"></el-input>
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <span>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </el-row>
          <el-row style="padding-bottom: 20px">
            <el-radio v-model="radio" label="C" style="margin-right: 0px"
              >C：</el-radio
            >
            <el-input style="width: 240px"></el-input>
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <span>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </el-row>
          <el-row style="padding-bottom: 20px">
            <el-radio v-model="radio" label="D" style="margin-right: 0px"
              >D：</el-radio
            >
            <el-input style="width: 240px"></el-input>
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <span>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </el-row>
          <el-button type="danger" size="small" disabled
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <el-form-item
          label="选项："
          v-else-if="formData.questionType === '多选'"
        >
          <el-checkbox-group v-model="checkList">
            <el-row style="padding-bottom: 20px">
              <el-checkbox style="margin-right: 0px" label="A">A：</el-checkbox>
              <el-input style="width: 240px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <span>上传图片</span>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-row>
            <el-row style="padding-bottom: 20px">
              <el-checkbox style="margin-right: 0px" label="B">B：</el-checkbox>
              <el-input style="width: 240px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <span>上传图片</span>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-row>
            <el-row style="padding-bottom: 20px">
              <el-checkbox style="margin-right: 0px" label="C">C：</el-checkbox>
              <el-input style="width: 240px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <span>上传图片</span>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-row>
            <el-row style="padding-bottom: 20px">
              <el-checkbox style="margin-right: 0px" label="D">D：</el-checkbox>
              <el-input style="width: 240px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <span>上传图片</span>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-row>
          </el-checkbox-group>
          <el-button type="danger" size="small">+增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频：">
          <el-input v-model="formData.videoURL" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析：" prop="answer">
          <quill-editor v-model="formData.answer"> </quill-editor>
        </el-form-item>
        <el-form-item label="题目备注：">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            style="width: 400px"
            rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题标签：">
          <el-select v-model="formData.tags" style="width: 400px" multiple>
            <el-option
              v-for="(item, index) in tags"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button style="margin: 0 0 22px 120px" type="primary" @click="btnOK"
          >确认提交</el-button
        >
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { list } from '@/api/hmmm/subjects'
import { directorysList } from '@/api/hmmm/directorys'
import { list as companysList } from '@/api/hmmm/companys'
import { direction } from '@/api/hmmm/constants'
import { tagsList } from '@/api/hmmm/tags'
import { add } from '@/api/hmmm/questions'

export default {
  data () {
    return {
      formData: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        enterpriseID: null, // 企业
        province: null, // 城市
        city: null, // 地区
        direction: null, // 方向
        questionType: '多选', // 题目类型
        difficulty: '简单', // 题目难度
        question: null, // 题干
        options: [], // 选项
        videoURL: null, // 解析视频
        answer: null, // 解析
        remarks: null, // 备注
        tags: null // 标签
      },
      provinces: [], // 所有城市
      citys: [], // 所有地区
      subjects: [], // 所有学科
      directorys: [], // 目录列表
      companys: [], // 企业列表
      direction, // 方向列表
      tags: [], // 所有标签列表
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      checkList: [], // 多选
      radio: null // 单选
    }
  },
  methods: {
    handleAvatarSuccess () {},
    beforeAvatarUpload () {},
    provinceChange (e) {
      this.formData.city = null
      this.citys = citys(e)
    },
    async getSubjects () {
      const { data: { items } } = await list()
      // console.log(items)
      this.subjects = items
    },
    async getDirectorys () {
      const { data: { items } } = await directorysList()
      // console.log(items)
      this.directorys = items
    },
    async getCompanys () {
      const { data: { items } } = await companysList()
      // console.log(items)
      this.companys = items
    },
    async getTags () {
      const { data: { items } } = await tagsList()
      // console.log(items)
      this.tags = items.map(item => item.tagName)
    },
    async btnOK () {
      try {
        await this.$refs.form.validate()
        await add({ ...this.formData, tags: this.formData.tags.join() })
        this.formData = {
          subjectID: null, // 学科
          catalogID: null, // 目录
          enterpriseID: null, // 企业
          province: null, // 城市
          city: null, // 地区
          direction: null, // 方向
          questionType: '多选', // 题目类型
          difficulty: '简单', // 题目难度
          question: null, // 题干
          options: [
            {
              code: 'asdasd',
              title: 'A',
              img: null,
              isRight: true
            }
          ], // 选项
          videoURL: null, // 解析视频
          answer: null, // 解析
          remarks: null, // 备注
          tags: null // 标签
        }
        this.$refs.form.resetFields()
      } catch (err) {
        console.log(err)
      }
    }
  },
  created () {
    this.provinces = provinces()
    this.getSubjects()
    this.getDirectorys()
    this.getCompanys()
    this.getTags()
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  .avatar-uploader {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    .el-icon-circle-close {
      position: absolute;
      top: -7px;
      right: -7px;
    }
  }
}
</style>
